<template>
  <div class="wuhu-map-container">
    <div class="map-controls">
      <button @click="toggleMapMode" class="control-btn">
        <i class="fas fa-layer-group"></i>
        {{ mapMode === 'normal' ? '热力图' : '普通' }}
      </button>
    </div>
    
    <div class="map-wrapper">
      <!-- 加载指示器 -->
      <div v-if="!wuhuGeoData" class="loading-indicator">
        <div class="loading-spinner"></div>
        <p>正在加载地图数据...</p>
      </div>
      
      <v-chart 
        v-if="wuhuGeoData"
        class="wuhu-map" 
        :option="mapOption" 
        :autoresize="false"
        @click="onMapClick"
        @mouseover="onMapHover"
        @mouseout="onMapLeave"
      />
      
      <!-- 备用显示 -->
      <div v-else class="map-fallback">
        <div class="fallback-content">
          <h3>地图加载中...</h3>
          <p>正在加载芜湖市地图数据，请稍候...</p>
          <div class="loading-dots">
            <span></span>
            <span></span>
            <span></span>
          </div>
        </div>
      </div>
      
      <!-- 自定义Tooltip -->
      <div 
        v-if="tooltip.visible" 
        class="custom-tooltip"
        :style="{ left: tooltip.x + 'px', top: tooltip.y + 'px' }"
      >
        <div class="tooltip-content">
          <h4>{{ tooltip.data.name }}</h4>
          <p>区域代码: {{ tooltip.data.adcode }}</p>
          <p>中心坐标: {{ tooltip.data.center?.join(', ') }}</p>
          <div class="tooltip-stats">
            <div class="stat-item">
              <span class="stat-label">发展指数</span>
              <span class="stat-value">{{ tooltip.data.developmentIndex || 'N/A' }}</span>
            </div>
            <div class="stat-item">
              <span class="stat-label">活跃度</span>
              <span class="stat-value">{{ tooltip.data.activity || 'N/A' }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { MapChart } from 'echarts/charts'
import { TitleComponent, TooltipComponent, VisualMapComponent, LegendComponent } from 'echarts/components'
import VChart from 'vue-echarts'

// 注册ECharts组件
use([
  CanvasRenderer,
  MapChart,
  TitleComponent,
  TooltipComponent,
  VisualMapComponent,
  LegendComponent
])

export default {
  name: 'WuhuMap',
  components: {
    VChart
  },
  data() {
    return {
      mapMode: 'normal', // 'normal' | 'heatmap'
      tooltip: {
        visible: false,
        x: 0,
        y: 0,
        data: {}
      },
      wuhuGeoData: null,
      connectionLines: [],
      scatterPoints: [],
      heatmapData: [],
      pulseTimer: null,
      hoverTimer: null,
      // 高亮状态管理
      highlightedRegion: null
    }
  },
  computed: {
    mapOption() {
      if (!this.wuhuGeoData) return {}
      
      const baseOption = {
        backgroundColor: 'transparent',
        tooltip: {
          show: true,
          trigger: 'item',
          formatter: (params) => {
            if (params.seriesType === 'scatter') {
              return `<div style="padding: 10px; background: rgba(0, 0, 0, 0.8); border-radius: 8px; border: 1px solid #00d4ff; color: white;">
                <div style="font-size: 16px; font-weight: bold; color: #00d4ff; margin-bottom: 5px;">${params.data[3]}</div>
                <div style="font-size: 12px; color: #ccc;">类型: ${params.data[4]}</div>
              </div>`
            } else if (params.seriesType === 'map') {
              return `<div style="padding: 8px; background: rgba(0, 0, 0, 0.8); border-radius: 6px; border: 1px solid #3b82f6; color: white;">
                <div style="font-size: 14px; font-weight: bold; color: #3b82f6;">${params.name}</div>
              </div>`
            }
            return params.name
          },
          backgroundColor: 'transparent',
          borderColor: 'transparent',
          textStyle: {
            color: 'white'
          }
        },
        visualMap: {
          show: this.mapMode === 'heatmap',
          min: 0,
          max: 100,
          left: 'left',
          top: 'bottom',
          text: ['高', '低'],
          inRange: {
            color: ['#1e3a8a', '#3b82f6', '#06b6d4', '#10b981', '#f59e0b']
          },
          textStyle: {
            color: '#fff'
          }
        },
        geo: {
          map: 'wuhu',
          roam: false, // 禁用缩放和移动
          zoom: 0.9,
          center: [118.15, 31.1],
          left: 'center',
          right: 'center',
          top: 'center',
          bottom: 'center',
          width: '90%',
          height: '90%',
          aspectScale: 0.75,
          show: this.mapMode === 'normal', // 只在普通模式下显示
          // 确保坐标系统稳定
          coordinateSystem: 'geo',
          // 确保坐标固定
          layoutCenter: ['50%', '50%'],
          layoutSize: '90%',
          itemStyle: {
            areaColor: 'transparent',
            borderColor: '#3b82f6',
            borderWidth: 2,
            shadowColor: 'rgba(59, 130, 246, 0.3)',
            shadowBlur: 10
          },
          emphasis: {
            itemStyle: {
              areaColor: (params) => {
                // 根据区域名称返回对应的深色
                const regionColors = {
                  '无为市': 'rgba(147, 51, 234, 0.8)', // 紫色深色
                  '芜湖县': 'rgba(6, 182, 212, 0.8)', // 青色深色
                  '繁昌县': 'rgba(245, 158, 11, 0.8)', // 橙色深色
                  '南陵县': 'rgba(16, 185, 129, 0.8)', // 绿色深色
                  '镜湖区': 'rgba(239, 68, 68, 0.8)', // 红色深色
                  '弋江区': 'rgba(99, 102, 241, 0.8)', // 蓝色深色
                  '鸠江区': 'rgba(168, 85, 247, 0.8)', // 紫色深色
                  '三山区': 'rgba(34, 197, 94, 0.8)' // 绿色深色
                }
                return regionColors[params.name] || 'rgba(59, 130, 246, 0.8)'
              },
              borderColor: '#06b6d4',
              borderWidth: 3,
              shadowColor: 'rgba(6, 182, 212, 0.5)',
              shadowBlur: 20
            },
            label: {
              show: true,
              color: '#fff',
              fontSize: 14,
              fontWeight: 'bold',
              textShadowColor: 'rgba(0, 0, 0, 0.8)',
              textShadowBlur: 5
            }
          },
          regions: this.getRegionStyles()
        },
        series: this.getSeries()
      }
      
      return baseOption
    }
  },
  async mounted() {
    console.log('WuhuMap组件开始加载...')
    try {
      await this.loadGeoData()
      if (this.wuhuGeoData) {
        console.log('地图数据加载完成，开始生成其他数据...')
        this.generateScatterPoints()
        this.generateHeatmapData()
        this.generateConnectionLines()
        this.startPulseEffect()
        console.log('WuhuMap组件初始化完成')
      } else {
        console.error('地图数据加载失败')
      }
    } catch (error) {
      console.error('WuhuMap组件初始化失败:', error)
    }
  },
  beforeUnmount() {
    this.stopPulseEffect()
    if (this.hoverTimer) {
      clearTimeout(this.hoverTimer)
    }
  },
  methods: {
    async loadGeoData() {
      try {
        // 从public目录加载JSON数据
        const response = await fetch('/芜湖市.json')
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`)
        }
        this.wuhuGeoData = await response.json()
        
        // 注册地图
        const echarts = require('echarts')
        echarts.registerMap('wuhu', this.wuhuGeoData)
        console.log('地图数据加载成功:', this.wuhuGeoData)
        console.log('地图特征数量:', this.wuhuGeoData.features?.length || 0)
      } catch (error) {
        console.error('Failed to load geo data:', error)
        // 如果fetch失败，尝试直接导入
        try {
          const wuhuData = await import('../芜湖市.json')
          this.wuhuGeoData = wuhuData.default || wuhuData
          const echarts = require('echarts')
          echarts.registerMap('wuhu', this.wuhuGeoData)
          console.log('通过import加载地图数据成功')
        } catch (importError) {
          console.error('Import also failed:', importError)
          // 使用测试数据
          this.wuhuGeoData = {
            type: "FeatureCollection",
            features: [
              {
                type: "Feature",
                properties: {
                  adcode: 340202,
                  name: "镜湖区",
                  center: [118.376343, 31.32559]
                },
                geometry: {
                  type: "Polygon",
                  coordinates: [[[118.3, 31.2], [118.5, 31.2], [118.5, 31.4], [118.3, 31.4], [118.3, 31.2]]]
                }
              },
              {
                type: "Feature",
                properties: {
                  adcode: 340207,
                  name: "鸠江区",
                  center: [118.400174, 31.362716]
                },
                geometry: {
                  type: "Polygon",
                  coordinates: [[[118.2, 31.3], [118.4, 31.3], [118.4, 31.5], [118.2, 31.5], [118.2, 31.3]]]
                }
              }
            ]
          }
          const echarts = require('echarts')
          echarts.registerMap('wuhu', this.wuhuGeoData)
          console.log('使用测试地图数据')
        }
      }
    },
    
    getRegionStyles() {
      if (!this.wuhuGeoData) return []
      
      return this.wuhuGeoData.features.map((feature, index) => {
        const regionName = feature.properties.name
        const isHighlighted = this.highlightedRegion === regionName
        
        return {
          name: regionName,
          itemStyle: {
            areaColor: isHighlighted ? this.getRegionHighlightColor(regionName) : 'transparent',
            borderColor: this.getBorderColor(index),
            borderWidth: 2,
            shadowColor: 'rgba(0, 212, 255, 0.3)',
            shadowBlur: 8
          },
          emphasis: {
            itemStyle: {
              areaColor: this.getRegionHighlightColor(regionName),
              borderColor: '#06b6d4',
              borderWidth: 3,
              shadowColor: 'rgba(6, 182, 212, 0.6)',
              shadowBlur: 15
            }
          }
        }
      })
    },
    
    getRegionColor(name, index) {
      const colors = [
        'rgba(59, 130, 246, 0.15)',
        'rgba(139, 92, 246, 0.15)',
        'rgba(6, 182, 212, 0.15)',
        'rgba(16, 185, 129, 0.15)',
        'rgba(245, 158, 11, 0.15)',
        'rgba(239, 68, 68, 0.15)',
        'rgba(168, 85, 247, 0.15)'
      ]
      return colors[index % colors.length]
    },
    
    getRegionHighlightColor(regionName) {
      // 根据区域名称返回对应的深色
      const regionColors = {
        '无为市': 'rgba(147, 51, 234, 0.8)', // 紫色深色
        '芜湖县': 'rgba(6, 182, 212, 0.8)', // 青色深色
        '繁昌县': 'rgba(245, 158, 11, 0.8)', // 橙色深色
        '南陵县': 'rgba(16, 185, 129, 0.8)', // 绿色深色
        '镜湖区': 'rgba(239, 68, 68, 0.8)', // 红色深色
        '弋江区': 'rgba(99, 102, 241, 0.8)', // 蓝色深色
        '鸠江区': 'rgba(168, 85, 247, 0.8)', // 紫色深色
        '三山区': 'rgba(34, 197, 94, 0.8)' // 绿色深色
      }
      return regionColors[regionName] || 'rgba(59, 130, 246, 0.8)'
    },
    
    getBorderColor(index) {
      const colors = ['#3b82f6', '#8b5cf6', '#06b6d4', '#10b981', '#f59e0b', '#ef4444', '#a855f7']
      return colors[index % colors.length]
    },
    
    getEmphasisColor(index) {
      const colors = [
        'rgba(59, 130, 246, 0.4)',
        'rgba(139, 92, 246, 0.4)',
        'rgba(6, 182, 212, 0.4)',
        'rgba(16, 185, 129, 0.4)',
        'rgba(245, 158, 11, 0.4)',
        'rgba(239, 68, 68, 0.4)',
        'rgba(168, 85, 247, 0.4)'
      ]
      return colors[index % colors.length]
    },
    
    getSeries() {
      const series = []
      
      // 普通模式下不显示散点图和连接线，只显示基础地图
      
      // 热力图
      if (this.mapMode === 'heatmap' && this.heatmapData.length > 0) {
        series.push({
          type: 'map',
          map: 'wuhu',
          data: this.heatmapData,
          itemStyle: {
            areaColor: 'transparent'
          },
          emphasis: {
            itemStyle: {
              areaColor: 'rgba(59, 130, 246, 0.3)'
            }
          }
        })
      }
      
      // 普通模式下添加企业流通的神经网络效果
      if (this.mapMode === 'normal') {
        // 企业节点 - 使用固定坐标系统
        if (this.scatterPoints.length > 0) {
          series.push({
            type: 'scatter',
            coordinateSystem: 'geo',
            data: this.scatterPoints,
            symbolSize: 12,
            itemStyle: {
              color: {
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 0.5,
                colorStops: [
                  { offset: 0, color: '#00d4ff' },
                  { offset: 0.7, color: '#5b73e8' },
                  { offset: 1, color: 'rgba(0, 212, 255, 0.3)' }
                ]
              },
              shadowColor: 'rgba(0, 212, 255, 0.8)',
              shadowBlur: 20,
              borderColor: '#00d4ff',
              borderWidth: 1
            },
            emphasis: {
              itemStyle: {
                color: {
                  type: 'radial',
                  x: 0.5,
                  y: 0.5,
                  r: 0.5,
                  colorStops: [
                    { offset: 0, color: '#00d4ff' },
                    { offset: 0.5, color: '#5b73e8' },
                    { offset: 1, color: 'rgba(0, 212, 255, 0.6)' }
                  ]
                },
                shadowBlur: 30,
                borderColor: '#06b6d4',
                borderWidth: 2,
                scale: 1.3
              }
            },
            animation: true,
            animationDuration: 2000,
            animationEasing: 'cubicOut',
            rippleEffect: {
              brushType: 'stroke',
              color: '#00d4ff',
              number: 3
            },
            // 添加流光拖尾效果
            effect: {
              show: true,
              period: 2,
              trailLength: 0.1,
              color: '#00d4ff',
              symbolSize: 3
            },
            // 确保坐标固定
            geoIndex: 0
          })
        }
        
        // 企业连接线 - 营造流通感
        if (this.connectionLines.length > 0) {
          series.push({
            type: 'lines',
            coordinateSystem: 'geo',
            geoIndex: 0,
            data: this.connectionLines,
            lineStyle: {
              color: '#00d4ff',
              width: 2,
              opacity: 0.8,
              curveness: 0.3,
              shadowColor: 'rgba(0, 212, 255, 0.6)',
              shadowBlur: 12
            },
            effect: {
              show: true,
              period: 3,
              trailLength: 0.3,
              color: '#00d4ff',
              symbolSize: 3,
              constantSpeed: 15
            },
            emphasis: {
              lineStyle: {
                width: 4,
                opacity: 0.8,
                shadowBlur: 15
              }
            },
            animation: true,
            animationDuration: 3000,
            animationEasing: 'cubicInOut'
          })
        }
      }
      
      return series
    },
    
    generateScatterPoints() {
      if (!this.wuhuGeoData) return
      
      // 企业节点数据 - 根据芜湖市真实地理分布
      const enterpriseData = [
        // 鸠江区 - 经济技术开发区
        { name: '芜湖经济技术开发区', coords: [118.38, 31.35], size: 16, type: 'tech' },
        
        // 弋江区 - 高新技术开发区和大学城
        { name: '芜湖高新技术产业开发区', coords: [118.42, 31.32], size: 14, type: 'high-tech' },
        { name: '芜湖大学城', coords: [118.45, 31.30], size: 13, type: 'education' },
        
        // 镜湖区 - 政务中心和金融中心
        { name: '芜湖市政务中心', coords: [118.35, 31.28], size: 12, type: 'government' },
        { name: '芜湖金融中心', coords: [118.37, 31.30], size: 15, type: 'finance' },
        
        // 三山区 - 港口和物流
        { name: '芜湖港', coords: [118.25, 31.15], size: 18, type: 'logistics' },
        
        // 鸠江区 - 智能制造产业园
        { name: '芜湖智能制造产业园', coords: [118.40, 31.38], size: 17, type: 'manufacturing' },
        
        // 镜湖区 - 文化创意园
        { name: '芜湖文化创意园', coords: [118.33, 31.25], size: 11, type: 'culture' }
      ]
      
      this.scatterPoints = enterpriseData.map(enterprise => [
        enterprise.coords[0],
        enterprise.coords[1],
        enterprise.size,
        enterprise.name,
        enterprise.type
      ])
      
      console.log('Generated enterprise nodes:', this.scatterPoints.length)
    },
    
    generateHeatmapData() {
      if (!this.wuhuGeoData) return
      
      // 定义各区域的活跃度等级
      const regionActivityLevels = {
        '镜湖区': 95,    // 高活跃度
        '鸠江区': 80,    // 最高活跃度
        '弋江区': 88,    // 高活跃度
        '三山区': 45,    // 中等活跃度
        '无为市': 35,    // 较低活跃度
        '芜湖县': 30,    // 较低活跃度
        '繁昌县': 25,    // 低活跃度
        '南陵县': 20     // 最低活跃度
      }
      
      this.heatmapData = this.wuhuGeoData.features.map((feature) => {
        const regionName = feature.properties.name
        const baseValue = regionActivityLevels[regionName] || 30
        // 在基础值基础上添加小幅随机波动（±5）
        const value = Math.max(0, Math.min(100, baseValue + (Math.random() - 0.5) * 10))
        
        return {
          name: regionName,
          value: value,
          itemStyle: {
            areaColor: this.getHeatmapColor(value)
          }
        }
      })
    },
    
    getHeatmapColor(value) {
      const intensity = value / 100
      // 更明显的颜色对比，突出高活跃区域
      if (intensity < 0.25) return 'rgba(30, 58, 138, 0.2)'      // 深蓝 - 低活跃
      if (intensity < 0.45) return 'rgba(59, 130, 246, 0.3)'    // 蓝色 - 较低活跃
      if (intensity < 0.65) return 'rgba(6, 182, 212, 0.4)'     // 青色 - 中等活跃
      if (intensity < 0.85) return 'rgba(16, 185, 129, 0.6)'    // 绿色 - 高活跃
      return 'rgba(245, 158, 11, 0.8)'                          // 黄色 - 最高活跃
    },
    
    generateConnectionLines() {
      if (!this.wuhuGeoData) return
      
      this.connectionLines = []
      
      // 企业流通网络连接 - 模拟企业间的合作关系
      const enterpriseConnections = [
        { from: [118.376343, 31.32559], to: [118.4, 31.35], type: 'tech-cooperation' },
        { from: [118.376343, 31.32559], to: [118.42, 31.28], type: 'supply-chain' },
        { from: [118.4, 31.35], to: [118.45, 31.4], type: 'talent-flow' },
        { from: [118.35, 31.3], to: [118.38, 31.32], type: 'policy-support' },
        { from: [118.2, 31.1], to: [118.42, 31.28], type: 'logistics' },
        { from: [118.38, 31.32], to: [118.33, 31.38], type: 'investment' },
        { from: [118.45, 31.4], to: [118.33, 31.38], type: 'innovation' },
        { from: [118.42, 31.28], to: [118.33, 31.38], type: 'collaboration' }
      ]
      
      this.connectionLines = enterpriseConnections.map(connection => ({
        coords: [connection.from, connection.to],
        type: connection.type
      }))
      
      console.log('Generated enterprise connections:', this.connectionLines.length)
    },
    
    getRandomColor() {
      const colors = ['#00d4ff', '#5b73e8', '#06b6d4', '#10b981', '#f59e0b']
      return colors[Math.floor(Math.random() * colors.length)]
    },
    
    
    toggleMapMode() {
      this.mapMode = this.mapMode === 'normal' ? 'heatmap' : 'normal'
    },
    
    
    onMapClick(params) {
      console.log('Map clicked:', params)
      if (params && params.componentType === 'geo' && params.event && params.data) {
        this.showTooltip(params.event, params.data)
      }
    },
    
    onMapHover(params) {
      if (params && params.componentType === 'geo' && params.event && params.data) {
        // 清除之前的定时器
        if (this.hoverTimer) {
          clearTimeout(this.hoverTimer)
        }
        // 立即设置高亮区域
        this.highlightedRegion = params.data.name
        // 防抖处理tooltip显示
        this.hoverTimer = setTimeout(() => {
          this.showTooltip(params.event, params.data)
        }, 100)
      }
    },
    
    onMapLeave() {
      // 清除定时器
      if (this.hoverTimer) {
        clearTimeout(this.hoverTimer)
        this.hoverTimer = null
      }
      this.hideTooltip()
      // 延迟清除高亮状态，避免快速移动鼠标时闪烁
      setTimeout(() => {
        this.highlightedRegion = null
      }, 50)
    },
    
    showTooltip(event, data) {
      if (!data) {
        console.warn('Tooltip data is undefined')
        return
      }
      
      // 获取区域对应的活跃度数据
      const regionActivityLevels = {
        '镜湖区': 95,
        '鸠江区': 80,
        '弋江区': 88,
        '三山区': 45,
        '无为市': 35,
        '芜湖县': 30,
        '繁昌县': 25,
        '南陵县': 20
      }
      
      const regionName = data.name || '未知区域'
      const baseActivity = regionActivityLevels[regionName] || 30
      const activity = Math.floor(baseActivity + (Math.random() - 0.5) * 10)
      const developmentIndex = Math.floor(activity * 0.8 + Math.random() * 20)
      
      this.tooltip = {
        visible: true,
        x: event.offsetX + 10,
        y: event.offsetY - 10,
        data: {
          name: regionName,
          adcode: data.adcode || 'N/A',
          center: data.center || [0, 0],
          developmentIndex: Math.max(0, Math.min(100, developmentIndex)),
          activity: Math.max(0, Math.min(100, activity)) + '%'
        }
      }
    },
    
    hideTooltip() {
      this.tooltip.visible = false
    },
    
    
    startPulseEffect() {
      this.pulseTimer = setInterval(() => {
        this.updatePulseEffect()
      }, 2000)
    },
    
    stopPulseEffect() {
      if (this.pulseTimer) {
        clearInterval(this.pulseTimer)
        this.pulseTimer = null
      }
    },
    
    updatePulseEffect() {
      // 只在没有高亮区域时更新散点，避免干扰鼠标悬停效果
      if (!this.highlightedRegion) {
        // 随机更新一些散点的位置，但保持大小不变
        this.scatterPoints = this.scatterPoints.map((point) => {
          if (Math.random() > 0.7) {
            return [
              point[0] + (Math.random() - 0.5) * 0.02,
              point[1] + (Math.random() - 0.5) * 0.02,
              point[2], // 保持原始大小
              point[3],
              point[4]
            ]
          }
          return point
        })
      }
    }
  }
}
</script>

<style scoped>
.wuhu-map-container {
  position: relative;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(10, 10, 10, 0.8) 0%, rgba(26, 26, 46, 0.9) 100%);
  border-radius: 20px;
  overflow: hidden;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(59, 130, 246, 0.2);
}

.map-controls {
  position: absolute;
  top: 15px;
  right: 15px;
  display: flex;
  gap: 10px;
  z-index: 10;
}

.control-btn {
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.3);
  color: #3b82f6;
  padding: 8px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  gap: 5px;
}

.control-btn:hover {
  background: rgba(59, 130, 246, 0.2);
  border-color: rgba(59, 130, 246, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

.map-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.wuhu-map {
  width: 100%;
  height: 100%;
  min-height: 400px;
}

.custom-tooltip {
  position: absolute;
  background: rgba(0, 0, 0, 0.9);
  border: 1px solid rgba(59, 130, 246, 0.5);
  border-radius: 10px;
  padding: 15px;
  color: white;
  font-size: 0.9rem;
  z-index: 1000;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  transform: translate(-50%, -100%);
  margin-top: -10px;
}

.tooltip-content h4 {
  margin: 0 0 10px 0;
  color: #3b82f6;
  font-size: 1.1rem;
  font-weight: 600;
}

.tooltip-content p {
  margin: 5px 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.85rem;
}

.tooltip-stats {
  display: flex;
  gap: 15px;
  margin-top: 10px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-label {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 2px;
}

.stat-value {
  font-size: 0.9rem;
  color: #06b6d4;
  font-weight: 600;
}


/* 地图增强效果 */
.wuhu-map-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 20%, rgba(0, 212, 255, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(91, 115, 232, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(6, 182, 212, 0.05) 0%, transparent 50%);
  animation: mapGlow 8s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes mapGlow {
  0%, 100% { 
    opacity: 0.6; 
    transform: scale(1) rotate(0deg); 
  }
  50% { 
    opacity: 1; 
    transform: scale(1.02) rotate(1deg); 
  }
}

/* 地图边框 */
.map-wrapper::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, #00d4ff, #5b73e8, #06b6d4, #10b981);
  border-radius: 22px;
  z-index: -1;
  opacity: 0.3;
}

/* 加载指示器 */
.loading-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #3b82f6;
  z-index: 10;
}

/* 备用显示 */
.map-fallback {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(10, 10, 10, 0.8) 0%, rgba(26, 26, 46, 0.9) 100%);
  z-index: 5;
}

.fallback-content {
  text-align: center;
  color: white;
}

.fallback-content h3 {
  color: #3b82f6;
  margin-bottom: 10px;
  font-size: 1.2rem;
}

.fallback-content p {
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 20px;
}

.loading-dots {
  display: flex;
  justify-content: center;
  gap: 5px;
}

.loading-dots span {
  width: 8px;
  height: 8px;
  background: #3b82f6;
  border-radius: 50%;
  animation: loadingDots 1.4s infinite ease-in-out both;
}

.loading-dots span:nth-child(1) { animation-delay: -0.32s; }
.loading-dots span:nth-child(2) { animation-delay: -0.16s; }
.loading-dots span:nth-child(3) { animation-delay: 0s; }

@keyframes loadingDots {
  0%, 80%, 100% {
    transform: scale(0);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(59, 130, 246, 0.2);
  border-top: 4px solid #3b82f6;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 15px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-indicator p {
  margin: 0;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
  text-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .map-controls {
    top: 10px;
    right: 10px;
    flex-direction: column;
    gap: 5px;
  }
  
  .control-btn {
    padding: 6px 10px;
    font-size: 0.7rem;
  }
  
  .custom-tooltip {
    font-size: 0.8rem;
    padding: 10px;
  }
  
  .tooltip-stats {
    flex-direction: column;
    gap: 8px;
  }
  
}
</style>
